<!-- 登录页面 -->
<template>

  <div class="page-container">
    <el-row class="el-layout-row" justify="center" align="middle">
      <el-col :span="10" class="half-left">
        <div class="left-img-container">
          <el-image src="img/mult.png" :fit="fits[0]" />
        </div>
      </el-col>
      <el-col :span="14" class="half-right">
        <h1>XXXX 企业管理系统</h1>
          <div class="login-form-container">
<!--            <el-tabs v-model="activeName">-->
<!--              <el-tab-pane label="账号登录" name="user"><User /></el-tab-pane>-->
<!--              <el-tab-pane label="手机号登录" name="phone"><Phone /></el-tab-pane>-->
<!--            </el-tabs>-->

            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item>
                <div class="form-item-container">
                  <el-text class="form-item-label">工号：</el-text>
                  <el-input v-model="form.useraccount" />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="form-item-container">
                  <el-text class="form-item-label">姓名：</el-text>
                  <el-input v-model="form.username" />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="form-item-container">
                  <el-text class="form-item-label">密码：</el-text>
                  <el-input v-model="form.password" />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="form-item-container">
                  <el-text class="form-item-label">验证码：</el-text>
                  <div class="form-item-text-container">
                    <el-input class="form-item-text-captcha" v-model="form.captcha" />
                    <el-image :src="captcha.url" @click="getCaptchImg">验证码图片</el-image>
                  </div>
                </div>
              </el-form-item>
              <div class="form-item-container one-right-align">
                <el-button type="primary" class="btn-login" @click="login" style="width:100%">登录</el-button>
                <el-button type="default" class="btn-login" @click="getUserInfo" style="width:100%">获取用户信息</el-button>
              </div>
            </el-form>


          </div>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import './login.css'
import type { ImageProps } from 'element-plus'
import { getCaptchaImg$, login8Json$,getUserInfo$ } from '@api/login'
// import User from './module/User.vue' 导入子组件
import { formatDate } from '@utils/datetimeUtils'
import { AesManager } from '@utils/aes'
import useLogin from '@hooks/useLogin'

//#region 全局变量
let captcha = reactive({key:'',url:''})// 请求验证码时的时间戳，前端页面用于显示验证码图片的url
const fits = [
  'fill',
  'contain',
  'cover',
  'none',
  'scale-down',
] as ImageProps['fit'][]

const form = reactive({
  useraccount: 'admin',
  username: 'cc',
  password: 'abc123456',
  captcha: ''
})
//#endregion

//#region 初始化
// 页面初始化后立即获取验证码图片
const getCaptchImg = async () => {
  const uuid = new Date().getTime().toString()
  captcha.key = uuid
  const arrBuffer = await getCaptchaImg$(uuid)
  const blob = new Blob([arrBuffer],{type:'application/vnd.ms-excel'})
  captcha.url = URL.createObjectURL(blob)
}
const getUserInfo = async () => {
  const res = await getUserInfo$()
  console.log('获取到的用户信息：', res)
}
//#endregion

//#region 事件函数
const login = async () => {// 登录
  // 登录账号密码：admin / abc123456
  const loginData = {
    username: AesManager.encrypt(form.useraccount),
    password: AesManager.encrypt(form.password),
    key: captcha.key,
    captcha: form.captcha
  }

  const res = await login8Json$(loginData)
  console.log('请求登录得到响应结果：', res)
  const { code } = res
  if(parseInt(code) !== 200) return
  useLogin(res)

}
const rules = reactive({// 表单验证规则

})
//#endregion

//#region 生命周期函数
onBeforeMount(() => {
  getCaptchImg()
})
//#endregion
</script>
<style>
.half-right {
  height: 100%;
  //background-color: #42d392;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-form-container {
  //background-color: #3178c6;
  height: 300px;
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.btn-login {
  width: 206px;
}
.form-item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.form-item-text-container {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.form-item-label {
  width: 90px;
}
.form-item-text-captcha {
  width : 100px;
}

</style>
